<template>
  <div>
    <!-- -->
    <input type="text" :value="info"  name="" id="inp">
    <button @click="addInfo">添加信息</button>
    <div>
            {{info}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifeCycle',

  data() {
    return {
      info:"今天天气真不错",
    };
  },

  mounted() {
    console.log("加载结束data数据"+this.info);
  },

  beforeUpdate(){
    console.log("视图数据不同步");
    console.log("更新前data数据"+this.info);
    let inp =  document.querySelector("#inp")
    console.log("更新前视图数据"+inp.value);
    console.log("");
  },
  updated(){
    console.log("更新后data数据"+this.info);
    let inp =  document.querySelector("#inp")
    console.log("更新后视图数据"+inp.value);
  },

  methods: {
    addInfo(){
            this.info+="1"
    }
  },
};
</script>